<template>
  <div class="articles-page">
    <app-header />
    
    <div class="page-content">
      <h1>文章列表</h1>
      
      <!-- PC端文章列表 -->
      <template v-if="!isMobileDevice">
        <el-card v-for="article in articles" :key="article.id" class="article-card">
          <h2>{{ article.title }}</h2>
          <p class="summary">{{ article.summary }}</p>
          <div class="meta">
            <span class="date">{{ article.date }}</span>
            <el-button type="primary" size="small" @click="readMore(article)">
              阅读更多
            </el-button>
          </div>
        </el-card>
        
        <el-pagination
          v-if="total > 0"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next"
          @current-change="handlePageChange"
        />
      </template>

      <!-- 移动端文章列表 -->
      <template v-else>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-card
              v-for="article in articles"
              :key="article.id"
              :title="article.title"
              :desc="article.summary"
              @click="readMore(article)"
            >
              <template #footer>
                <span class="date">{{ article.date }}</span>
              </template>
            </van-card>
          </van-list>
        </van-pull-refresh>
      </template>
    </div>

    <app-footer />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useArticleStore } from '@/stores/article'
import { isMobile } from '@/utils/device'
import AppHeader from '@/components/layout/AppHeader.vue'
import AppFooter from '@/components/layout/AppFooter.vue'

const router = useRouter()
const articleStore = useArticleStore()
const isMobileDevice = ref(isMobile())

const currentPage = ref(1)
const pageSize = ref(10)
const refreshing = ref(false)
const loading = ref(false)
const finished = ref(false)

const articles = ref([])
const total = ref(0)

onMounted(async () => {
  await loadArticles()
})

async function loadArticles() {
  await articleStore.fetchArticles(currentPage.value, pageSize.value)
  articles.value = articleStore.articles
  total.value = articleStore.total
}

function handlePageChange(page) {
  currentPage.value = page
  loadArticles()
}

function readMore(article) {
  router.push(`/article/${article.id}`)
}

// 移动端下拉刷新
async function onRefresh() {
  currentPage.value = 1
  finished.value = false
  await loadArticles()
  refreshing.value = false
}

// 移动端加载更多
async function onLoad() {
  if (articles.value.length >= total.value) {
    finished.value = true
    return
  }
  currentPage.value += 1
  await loadArticles()
  loading.value = false
}
</script>

<style lang="scss" scoped>
.articles-page {
  padding-top: 60px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  .page-content {
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;

    h1 {
      margin-bottom: 30px;
      text-align: center;
    }
  }
}

.article-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.3s;

  &:hover {
    transform: translateY(-5px);
  }

  h2 {
    margin: 0 0 10px;
    font-size: 1.5em;
  }

  .summary {
    color: #666;
    margin-bottom: 15px;
  }

  .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .date {
      color: #999;
    }
  }
}

// 移动端样式
@media screen and (max-width: 768px) {
  .articles-page {
    .page-content {
      padding: 15px;
    }
  }

  .van-card {
    margin-bottom: 10px;
  }
}
</style> 